<template>
  <v-app>
    <v-main>
      <v-container lg="4" md="4" sm="12">
        <!-- 常用信息 -->
        <v-row>
          <v-col>
            <!-- logo -->
            <img src="../../assets/images/logo.png" alt="" class="logoImg">
            <!-- 提示文字 -->
            <p class="pleText text-center">Not a Chinese supplier?<a href="">Please click here</a></p>
            <!-- 跳转登录页面 -->
            <p class="login d-flex justify-space-between align-center"><span>注册成为供应商</span><span>已有账号? <a
                  href="">登录</a></span></p>
            <img src="./images/invitation-bn.jpg" alt="" class="langImg">
          </v-col>
        </v-row>

        <!-- 表单 -->
        <v-row style="padding: 20px 40px;background-color: white;">
          <!-- 手机号输入 -->
          <v-form ref="form" v-model="valid">
            <p>手机号</p>
            <v-row class="d-flex justify-space-between align-center">
              <v-col lg="2" sm="1" xs="2">
                <!-- 前缀区号选择 -->
                <v-select outlined class="custom-textbox" v-model="selected" :items="items" return-object item-text="text"
                  item-value="value">
                </v-select>
              </v-col>
              <v-col lg="7" sm="7" xs="2">
                <v-text-field outlined v-model="enrollForm.phone" required :rules="phoneRules" style="width: 100%;"
                  placeholder="手机号"></v-text-field>
              </v-col>
              <v-col lg="3" sm="3" xs="2">
                <v-btn depressed outlined>发送验证码</v-btn>
              </v-col>
            </v-row>
            <!-- 验证码 -->
            <v-row class="d-flex">
              <v-col cols="12">
                <v-label>验证码</v-label>
              </v-col>
              <v-col cols="12">
                <v-text-field outlined v-model="enrollForm.yxNum" required placeholder="验证码"></v-text-field>
              </v-col>
            </v-row>
            <!-- 用户协议 -->
            <v-row>
              <p class="d-flex" style="line-height: 62px;">
                <v-checkbox v-model="padless" hide-details @change="changeBox"></v-checkbox>
                阅读并接受《<a href="#">用户协议</a>》及《 <a href="#">隐私策略</a>》
              </p>
            </v-row>
            <!-- 提交按钮 -->
            <v-btn class="ma-2" color="error" style="width: 100%" :disabled=isCommit @click="submitForm">
              下一步
            </v-btn>
          </v-form>
          <!-- 用户协议 -->
          <v-row>
            <div class="text-center">
              <!-- 用户协议显示隐藏 -->
              <v-dialog v-model="dialog" width="500" scrollable>
                <!-- 按钮插槽 -->
                <v-card>
                  <v-card-title class="text-h5 grey lighten-2">
                    中国制造网《用户协议》和《隐私政策》
                  </v-card-title>
                  <v-card-text>
                    <p> (审慎阅读]欢迎成为中国制造网册用户，我们将通过《用户协议》和《隐私政策》，帮助您了解我
                      们为您提供的服务，以及收集、处理个人信息的方式。您在点击同意前，请务必认真阅读并充分理解协
                      议中相关条款内容，尤其是:</p>
                    <p> 1、与您约定免除或限制责任的条款;</p>
                    <p> 2、与您约定法律适用和管辖的条款;</p>
                    <p> 3、其他以斜体/粗体/粗体下划线的方式予以显著标识的重要条款;</p>
                    <p> [特别提示]在您注册过程中，您需要完成我们的注册流程，并通过点击同意的方式在线签署以下协
                      议，一旦您点击同意或完成注册流程，即视为您已充分阅读、理解并接受《用户协议》《隐私政策》内
                      容;如您对《用户协议》《隐私政策》有任何异议，请您立即停止使用中国制造网。</p>
                    <p>用户协议</p>
                    <p>版本更新时间:[2021年10月21日]</p>
                    <p>版本生效时间:[2021年10月28日]</p>
                    <p>旧版本查阅地址:[https://login.made-in-china.com/help/user-terms-cn-20211028]</p>
                    <p>如果您对本协议有任何疑问、意见或建议，可通过以下方式与我们联系，一般情况下，我们将在7日内予以回复.</p>
                    <p>电子邮件: edit@made-in-china.com</p>
                    <p>客服热线:025-66677777</p>
                    <p>
                      中国制造网(包括PC端www.made-in-china.com、web端、APP、小程序等，以下或称“平台是由焦点科技股份有限公司
                      (以下简称“焦点科技”或“我们”，联系地址:江苏省南京市江北新区丽景路7号)独立开发并运营的全链路外贸服务综合
                      平台。本协议包含用户(以下或称”您”)与我们之间就使用中国制造网相关服务时所涉及的条款
                    </p>

                  </v-card-text>
                  <v-divider></v-divider>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" text @click="check">
                      同意并注册
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </div>
          </v-row>

        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>
<script>
export default {
  name: 'MyEnroll',
  data() {
    return {
      valid: true,//表单验证
      enrollForm: {
        phoneHead: '',
        phone: '',
        // 验证码
        yzNum: ''
      },
      dialog: false,//用户协议显示隐藏
      selected: '86', // 绑定的选中项
      isCommit: true,//提交按钮是否提交disabled
      padless: false,//绑定已阅读
      items: [ // 下拉框选项数据
        { text: '+86', value: '86' },
        { text: '+852', value: '852' },
        { text: '+853', value: '853' },
        { text: '+886', value: '886' }
      ],
      // 手机号验证规则
      phoneRules: [
        v => !!v || '手机号不能为空',
        v => /^\d+$/.test(v) || '手机号必须为数字',
        v => v.length === 11 || '手机号必须是11位数字'
      ]
    }
  },
  methods: {
    // 确定隐藏协议框 并且勾选
    check() {
      this.dialog = false,
        this.padless = true;
      this.isCommit = false;
    },
    changeBox() {
      if (this.padless) {
        this.dialog = true;
        this.padless = false;
      } else {
        this.dialog = false
      }
    },
    // 表单提交事件
    submitForm() {
      console.log(2222);
      // vuetify2.6版本写法 3之后又改动
      console.log(this.$refs);
      let qq = this.$refs.form.validate();
      if (qq) {
        console.log("验证成功");
      } else {
        console.log("验证失败");
      }
    }

  }
}
</script>
<style lang='scss' scoped>
.container {
  font-size: 1rem;
  max-width: 40rem;
  // width: 40%;
  margin: 0 auto;

  .row {
    width: 100%;
  }

  // logo图片
  .logoImg {
    width: 40%;
    margin: 10px 0px;
  }

  // 中间长图
  .langImg {
    width: 100%;
  }

  // 调整下拉框的输入框大小
  // .custom-textbox .v-text-field__slot {
  //       /* 调整文本框的大小 */
  //       height: 40px; /* 设置高度 */
  //       padding: 0 16px; /* 设置内边距 */
  //       font-size: 16px; /* 设置字体大小 */
  //     }
}
</style>